<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>购物车</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center cart">
    <header>
        购物车(66)
    </header>

    <section class="main">
        <form action="" class="form_cart my_products">
            <ul>
                <li>

                    <dl class="container my_products">
                        <dt>
                            <input type="checkbox" class="all_sub"><a href="detail_pro.html"><img src="img/shop_icon.png" alt="">宜家家居专营店&nbsp;&gt;</a>
                            <a href="javascript:void(0)" class="edit">编辑</a>
                        </dt>
                        <dd>
                            <input type="checkbox">
                            <div class="pic">
                                <a href="detail_pro.html">
                                    <img src="img/pro_img.jpg" alt="">
                                </a>
                            </div>
                            <div class="desc">
                                <h3><a href="detail_pro.html">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h3>
                                <p>分类:欧式花,普通机械锁,黄铜材质</p>
                                <div class="price pro_price"><em>￥<strong>366.00</strong></em></div>
                                <div class="count">
                                    <a href="javascript:void(0)" class="minus">-</a>
                                    <input type="text" value="1" class="buy_count">
                                    <a href="javascript:void(0)" class="plus">+</a>
                                </div>
                                <div class="subtotal"><strong>366.00</strong></div>
                            </div>


                        </dd>
                    </dl>
                </li>
                <li>

                    <dl class="container my_products">
                        <dt>
                            <input type="checkbox"  class="all_sub"><a href="detail_pro.html"><img src="img/shop_icon.png" alt="">宜家家居专营店&nbsp;&gt;</a>
                            <a href="javascript:void(0)" class="edit">编辑</a>
                        </dt>
                        <dd>
                            <input type="checkbox">
                            <div class="pic">
                                <a href="detail_pro.html">
                                    <img src="img/pro_img.jpg" alt="">
                                </a>
                            </div>
                            <div class="desc">
                                <h3><a href="detail_pro.html">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h3>
                                <p>分类:欧式花,普通机械锁,黄铜材质</p>
                                <div class="price pro_price"><em>￥<strong>366.00</strong></em></div>
                                <div class="count">
                                    <a href="javascript:void(0)" class="minus">-</a>
                                    <input type="text" value="1" class="buy_count">
                                    <a href="javascript:void(0)" class="plus">+</a>
                                </div>
                                <div class="subtotal"><strong>366.00</strong></div>
                            </div>


                        </dd>


                        <dd>
                            <input type="checkbox">
                            <div class="pic">
                                <a href="detail_pro.html">
                                    <img src="img/pro_img.jpg" alt="">
                                </a>
                            </div>
                            <div class="desc">
                                <h3><a href="detail_pro.html">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h3>
                                <p>分类:欧式花,普通机械锁,黄铜材质</p>
                                <div class="price pro_price"><em>￥<strong>366.00</strong></em></div>
                                <div class="count">
                                    <a href="javascript:void(0)" class="minus">-</a>
                                    <input type="text" value="1" class="buy_count">
                                    <a href="javascript:void(0)" class="plus">+</a>
                                </div>
                                <div class="subtotal"><strong>366.00</strong></div>
                            </div>


                        </dd>
                    </dl>
                </li>
                <li>

                    <dl class="container my_products">
                        <dt>
                            <input type="checkbox"  class="all_sub"><a href="detail_pro.html"><img src="img/shop_icon.png" alt="">宜家家居专营店&nbsp;&gt;</a>
                            <a href="javascript:void(0)" class="edit">编辑</a>
                        </dt>
                        <dd>
                            <input type="checkbox">
                            <div class="pic">
                                <a href="detail_pro.html">
                                    <img src="img/pro_img.jpg" alt="">
                                </a>
                            </div>
                            <div class="desc">
                                <h3><a href="detail_pro.html">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h3>
                                <p>分类:欧式花,普通机械锁,黄铜材质</p>
                                <div class="price pro_price"><em>￥<strong>366.00</strong></em></div>
                                <div class="count">
                                    <a href="javascript:void(0)" class="minus">-</a>
                                    <input type="text" value="1" class="buy_count">
                                    <a href="javascript:void(0)" class="plus">+</a>
                                </div>
                                <div class="subtotal"><strong>366.00</strong></div>
                            </div>


                        </dd>
                    </dl>
                </li>
            </ul>

            <div class="clear"></div>

            <div class="sum_up">
                <ul class="container">

                    <li><input type="checkbox" id="total"  class="all_sub total_sub"><label for="total">全选</label></li>
                    <li>合计：<div class="price settle"><em><strong>00.00</strong></em></div></li>

                </ul>
                <input type="submit" value="结算">
            </div>

        </form>

    </section>


    <div class="fix_nav">
        <div class="wrapper">
            <ul class="container">
                <li>
                    <a href="index.html" class="home active">
                        首页
                    </a>
                </li>
                <li>
                    <a href="list.html" class="class">
                        分类
                    </a>
                </li>
                <li>
                    <a href="activity.html" class="activity_center">
                        活动中心
                    </a>
                </li>
                <li>
                    <a href="cart.html" class="cart"><span>99</span>
                        购物车
                    </a>
                </li>
                <li>
                    <a href="vip.html" class="mine"><span></span>
                        我的
                    </a>
                </li>
            </ul>

        </div>

    </div>

</body>
<script src="js/jquery.js"></script>
<script>
    $(function() {
        $(".minus").click(function(){
            var iBuyCount = $(this).siblings(".buy_count").val();
            iBuyCount=(iBuyCount--)>1?iBuyCount:1;
            $(this).siblings(".buy_count").val(iBuyCount);
            changeTotal($(this).siblings(".buy_count"));
        });
        $(".plus").click(function(){
            var iBuyCount = $(this).siblings(".buy_count").val();
            iBuyCount++;
            $(this).siblings(".buy_count").val(iBuyCount);
            changeTotal($(this).siblings(".buy_count"));
        });

        function changeTotal(obj){
            var $this=obj;
            var unitPrice=parseInt($this.parents(".count").siblings(".pro_price").find("strong").html());
            var num= parseInt($this.val());

            $this.parents(".count").siblings(".subtotal").find("strong").html(toDecimal2(unitPrice*num));
            var total=0;
            $(".my_products dd input:checked").each(function(){
                total+=parseInt($(this).parents("dd").find(".subtotal").find("strong").html());
            });
            $(".settle").find("strong").html("￥"+total.toFixed(2));
            //console.log(total);

        }
        function toDecimal2(x) {
            var f = parseFloat(x);
            if (isNaN(f)) {
                return false;
            }
            var f = Math.round(x*100)/100;
            var s = f.toString();
            var rs = s.indexOf('.');
            if (rs < 0) {
                rs = s.length;
                s += '.';
            }
            while (s.length <= rs + 2) {
                s += '0';
            }
            return s;
        }

        /*选结算产品*/
        $(".all_sub").each(function(){
            var $this=$(this);
            $this.click(function(){
                if(!$this.is(":checked")){
                    $this.parents(".my_products").eq(0).find("input[type='checkbox']").removeAttr("checked");
                    $this.parents(".my_products").eq(0).find("input[type='checkbox']").attr("checked", false);
                }else{
                    $this.parents(".my_products").eq(0).find("input[type='checkbox']").attr("checked", true);
                    $this.parents(".my_products").eq(0).find("input[type='checkbox']").prop("checked",true);
                }
                var total=0;
                $(".my_products dd input:checked").each(function(){
                    total+=parseInt($(this).parents("dd").find(".subtotal").find("strong").html());
                });
                $(".settle").find("strong").html("￥"+total.toFixed(2));
                // console.log(total);
            });
        });
        $("input[type='checkbox']").not(".all_sub").change(function(){
            var $this=$(this);
            var isAllChecked=true;
            if($this.is(":checked")){
                $this.parents(".my_products").eq(0).find("input[type='checkbox']").not(".all_sub").each(function(){
                    if(!$(this).is(":checked")){
                        isAllChecked=false;
                        return;
                    }
                });
            }
            if(isAllChecked){
                $this.parents(".my_products").eq(0).find(".all_sub").attr("checked", true);
                $this.parents(".my_products").eq(0).find(".all_sub").prop("checked",true);






            }else{
                $this.parents(".my_products").eq(0).find(".all_sub").removeAttr("checked");
                $this.parents(".my_products").eq(0).find(".all_sub").attr("checked", false);
            }
            if(!$this.is(":checked")){
                $this.parents(".my_products").each(function(){
                    $(this).find(".all_sub").eq(0).removeAttr("checked");
                    $(this).find(".all_sub").eq(0).attr("checked", false);
                    $this.parents(".my_products").each(function(){
                        $(".total_sub").removeAttr("checked");
                        $(".total_sub").attr("checked", false);

                    });

                });
            }
            var total=0;
            $(".my_products dd input:checked").each(function(){
                total+=parseInt($(this).parents("dd").find(".subtotal").find("strong").html());
            });
            $(".settle").find("strong").html("￥"+total.toFixed(2));
            //console.log(total);
        });
        $(".all_sub").not(".total_sub").change(function(){
            var $this=$(this);
            var isAllChecked=true;
            if($this.is(":checked")){
                $this.parents(".my_products").eq(1).find(".my_products .all_sub").each(function(){
                    if(!$(this).is(":checked")){
                        isAllChecked=false;
                        return;
                    }
                });
            }

            if(isAllChecked){
                $(".total_sub").attr("checked", true);
                $(".total_sub").prop("checked",true);
            }else{
                $(".total_sub").removeAttr("checked");
                $(".total_sub").attr("checked", false);
            }
            if(!$this.is(":checked")){
                $this.parents(".my_products").each(function(){
                    $(".total_sub").removeAttr("checked");
                    $(".total_sub").attr("checked", false);
                });
            }
            var total=0;
            $(".my_products dd input:checked").each(function(){
                total+=parseInt($(this).parents("dd").find(".subtotal").find("strong").html());
            });
            $(".settle").find("strong").html("￥"+total.toFixed(2));
        });

    });




</script>
</html>